﻿@{
    Layout = "~/Views/Shared/_MallLayout.cshtml";
    var ad = ViewData["ad"] as Pay.DTO.ad_dto;
    string site_img = ViewBag.img_url;
    ViewBag.Title = "商品兑换";
}

@section style{
    <link href="~/Scripts/mescroll/mescroll.min.css" rel="stylesheet" />
    <style type="text/css">
        .mescroll {
            width: 100%;
            max-width: 16rem;
            position: fixed;
            top: 0;
            bottom: 0;
            height: auto;
        }
    </style>
}
<body>
    <div class="mescroll" id="mescroll">

        <div class="page-exchange">
            <div class="ad">
                <div>
                    <img align="top" src="@(ad != null ? site_img + ad.img_url : "images/exchange_banner.png")"
                         onclick="@((ad != null && !string.IsNullOrEmpty(ad.link_url)) ? string.Format("clickAd('{0}','{1}')", ad.id,ad.link_url) : "")" alt="">
                </div>
                <div class="title fn30">
                    物品兑换
                    <span class="fn-right col-gray">
                        <a href="@Url.Action("ExchangeRecord","Consumption")"><em class="mr10 fn26">兑换记录</em></a>
                        <i class="icon-go4"></i>
                    </span>
                </div>
            </div>

            <div class="fallTop">
                <div class="mod-fallsceshi">
                    <div class="masonry" id="dataList">

                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- 置顶 -->
    <a class="goTop">
        <img src="~/Content/css/tokenmall/img/icon/goTop.png">
    </a>

    <script src="~/Scripts/tokenmall/masonry-docs.min.js"></script>
    <script src="~/Scripts/tokenmall/imagesloaded.min.js"></script>
    <script src="~/Scripts/mescroll/mescroll.min.js"></script>
    <script src="~/Scripts/token-common.js"></script>

    <script type="text/javascript">
        $(function () {
            var $container = $('.masonry');
            var total_pages = 1;
            var isload = false;
            var dataUrl = '/Consumption/_ProductExchange';
            var mescroll = new MeScroll("mescroll", {
                down: {
                    auto: false,
                    callback: function (mescroll) {
                        $container.html('');
                        $container.masonry('layout');
                        mescroll.resetUpScroll();
                    }
                },
                up: {
                    callback: askData,
                    page: { num: 0, size: 10 },
                    clearEmptyId: "dataList",
                    isBounce: false,
                    noMoreSize: 3,
                    htmlNodata: '<p class="upwarp-nodata">亲,我是有底线的~</p >',
                    empty: { warpId: "dataList", icon: "", tip: "亲,暂时没有数据哦~" },
                    toTop: {}
                }
            });
            //异步请求数据
            function askData(pager) {
                if (!isload && total_pages >= pager.num) {
                    isload = true;
                    $.ajax({
                        type: "post",
                        url: dataUrl,
                        params: "contentType",
                        data: { page: pager.num, size: pager.size },
                        success: function (res) {
                            var $elems = $(res);
                            var paged = $elems.siblings("page");
                            var rows = Number.parseInt(paged.attr("rows"));
                            var total = Number.parseInt(paged.attr("total_result"));
                            mescroll.endBySize(rows, total);
                            if (paged.length == 1) {
                                total_pages = Number.parseInt(paged.attr("total_pages"));
                                msnryobj.masonryImagesReveal($elems);
                                $('#dataList page').remove();
                            } else {
                                $(".upwarp-nodata").html('亲,暂时没有数据哦~');
                            }
                            isload = false;
                        },
                        error: function (err) {
                            isload = false;
                            mescroll.endErr();
                        }
                    });
                }
            }
            var width = $container.width() / 2;
            var msnryobj = $container.masonry({ itemSelector: '.item', gutter: 0, columnWidth: width, isAnimated: true });
            $.fn.masonryImagesReveal = function ($items) {
                var msnry = this.data('masonry');
                var itemSelector = msnry.options.itemSelector;
                $items.hide();
                this.append($items);
                $items.imagesLoaded().progress(function (imgLoad, image) {
                    var $item = $(image.img).parents(itemSelector);
                    $item.show();
                    msnry.appended($item);
                });
                return this;
            };

        })
    </script>

    <script>
        //点击广告，记录点击数
        function clickAd(id, url) {
            $.ajax({
                url: '@Url.Action("GetAd","Ad")',
                async: false,
                type: 'POST',
                data: { id: id },
                success: function (result) {
                    window.location.href = url;
                }
            });
        }
    </script>
</body>



